import { useEffect, useState, useRef, forwardRef } from 'react';
import { Button, Input, Form, DatePicker, Row, Col, Skeleton, App } from 'antd';
import dayjs from 'dayjs';
import loadable from '@loadable/component';

import { UPLOAD_FILE_OSS } from '@/config/url';
import styles from './index.module.scss';

const CommonUploadFiles = loadable(() => import('@/components/CommonUploadFiles'), {fallback: <Skeleton active/>});
const FormTag = loadable(() => import('@/components/FormTag'));

export default forwardRef((props, ref) => {
    const { onCancel, onOk, isModal=false, submitting=false } = props;
    const [form] = Form.useForm();
    const { message } = App.useApp();
    const [imgUploading, setImgUploading] = useState(false);

    // 返回
    const goBack = () => {
        onCancel?.();
    };

    // 新建作品，新建成功后返回首页
    const onSubmit = async () => {
        if (imgUploading) {
            message.destroy();
            message.warning('请等待图片上传完成');
            return;
        }
        form.validateFields().then(async values => {
            onOk?.(values);
        });
    };

    return (
        <div className={styles['container']}>
            <Form
                form={form}
                layout="horizontal"
                labelWrap={true}
                colon={false}
                labelCol={{span: 4}}
                wrapperCol={{span: 20}}
                ref={ref}
            >
                <h3 className={styles['base']}>基本信息</h3>
                <Form.Item
                    name="seriesImages"
                    label="图片"
                    rules={[
                        { 
                            required: true, 
                            validator: (_, value) => {
                                if (!value || !value.list || value.list.length === 0) {
                                    return Promise.reject(new Error('请上传作品图片'));
                                }
                                return Promise.resolve();
                            }
                        }
                    ]}
                    labelCol={{span: isModal?4:2}}
                    wrapperCol={{span: 20}}
                >
                    <CommonUploadFiles
                        enableMainImage
                        accept="image/*"
                        onUploadingChange={setImgUploading}
                        buttonText="上传图片"
                    />
                </Form.Item>
                <Row gutter={12}>
                    <Col xs={24} sm={24} md={24} lg={isModal ? 24 : 12}>
                        <Form.Item
                            name="seriesName"
                            label="作品名称"
                            rules={[{ required: true, message: '请输入作品名称' }]}
                        >
                            <Input placeholder="请输入作品名称" maxLength={64} showCount />
                        </Form.Item>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={isModal ? 24 : 12}>
                        <Form.Item
                            name="seriesNameEn"
                            label="英文名"
                        >
                            <Input placeholder="请输入英文名" maxLength={64} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={12}>
                    <Col xs={24} sm={24} md={24} lg={isModal ? 24 : 12}>
                        <Form.Item
                            name="author"
                            label="作者"
                        >
                           <FormTag placeholder="添加作者" maxLength={64} />
                        </Form.Item>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={isModal ? 24 : 12}>
                        <Form.Item
                            name="publicationYear"
                            label="发行年份"
                        >
                            <DatePicker 
                                picker="year" 
                                placeholder="请选择发行年份" 
                                style={{ width: '100%' }} 
                                disabledDate={(current) => current && current.year() > dayjs().year()} 
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={12}>
                    <Col xs={24} sm={24} md={24} lg={isModal ? 24 : 12}>
                        <Form.Item
                            name="contributingAuthor"
                            label="参与创作"
                        >
                            <FormTag placeholder="请输入参与创作" maxLength={64} />
                        </Form.Item>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={isModal ? 24 : 12}>
                        <Form.Item
                            name="searchNames"
                            label="检索名称"
                        >
                            <FormTag placeholder="请输入检索名称" maxLength={64} />
                        </Form.Item>
                    </Col>
                </Row>

                {/* 提交 */}
                <Form.Item noStyle>
                    <div className={styles['footer']}>
                        <Button onClick={goBack} disabled={submitting}>返回</Button>
                        <Button onClick={onSubmit} type="primary" htmlType="submit" loading={submitting} disabled={submitting || imgUploading}>提交</Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
});
